<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <title>第八组编程强国</title>
    <style>
      body {
        perspective: 1000px;
        transform-style: preserve-3d;
        background: no-repeat url("img/bg.png");
      }

      section {
        position: relative;
        width: 300px;
        height: 300px;
        margin: 200px auto;
        transform-style: preserve-3d;
        animation: move 20s linear infinite;
        transform: rotateX(30deg);
      }

      div {
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
      }

      img {
        width: 300px;
        height: 300px;
      }

      @keyframes move {
        from {
          transform: rotateY(0);
        }
        to {
          transform: rotateY(360deg);
        }
      }

      div:nth-child(1) {
        transform: translateZ(300px);
      }

      div:nth-child(2) {
        transform: translateZ(-300px) rotateY(180deg);
      }

      div:nth-child(3) {
        transform: translateX(300px) translateZ(150px) rotateY(60deg);
      }

      div:nth-child(4) {
        transform: translateX(300px) translateZ(-150px) rotateY(120deg);
      }

      div:nth-child(5) {
        transform: translate(-300px) translateZ(-150px) rotateY(240deg);
      }

      div:nth-child(6) {
        transform: translateX(-300px) translateZ(150px) rotateY(300deg);
      }
    </style>
  </head>

  <body>
    <section>
      <div>
        <a href="img/2.webp"><img src="img/ljb.png" alt="" /></a>
      </div>
      <div>
        <a href="img/2.webp"><img src="img/zzw.png" alt="" /></a>
      </div>
      <div>
        <a href="img/2.webp"><img src="img/1.png" alt="" /></a>
      </div>
      <div>
        <a href="img/2.webp"><img src="img/fyh.png" alt="" /></a>
      </div>
      <div>
        <a href="img/2.webp"><img src="img/zhq.png" alt="" /></a>
      </div>
      <div>
        <a href="img/2.webp"><img src="img/lmz.png" alt="" /></a>
      </div>
    </section>
  </body>
</html>
